<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('在线用户列表')" />
	<style type="text/css">
		label.layui-form-label {width: 95px;padding-right: 0px;}
	</style>
</head>
<body class="no-skin">
 <div class="main-container" id="main-container">
	<div class="main-content">
		<form>
			<th:block th:include="include :: searchTop" />
		</form>
	</div>
	<div class="mid-content">
		<table class="layui-hide" id="dhtable" lay-filter="ftable"></table>
	</div>
</div>
<script type="text/html" id="barDh">
    <a class="layui-btn layui-btn-danger layui-btn-xs fa fa-sign-out" lay-event="forceLogout" shiro:hasPermission="system:online:batchForceLogout"><span class="fa_span">强退</span></a>
</script>
<script type="text/html" id="toolbar1">
    <div class="layui-btn-container">
        <div class="layui-btn layui-btn-sm layui-btn-danger layui-table-tools" lay-event="batchForceLogout" shiro:hasPermission="system:online:forceLogout">
            <p class=" fa fa-sign-out" style="color:white;font-size:14px"><span class="fa_span">强退</span></p>
        </div>
    </div>
</script>
<script type="text/html" id="userStatus">
    <input type="checkbox" lay-skin="switch" lay-text="在线|离线" {{ d.status===('on_line') ? 'checked' : '' }} disabled="disabled">
</script>
<th:block th:include="include :: footer" />
<script type="text/javascript">
var $,layer,form,table,wherestr={};
layui.use(['table','form','layer','jquery'], function () {
     $ = layui.$,layer = layui.layer,form = layui.form,table = layui.table;
    $.tablelist.init({
        elem: '#dhtable'
        ,url: '/system/online/list'
        ,initSort: {field: 'startTimestamp',type: 'asc'}
        ,cols: [[
	    	{checkbox: true},
	    	{type:'numbers',title:''},
		    {field: 'sessionId',title: '会话编号'},
		    {field: 'loginName',title: '登录名称',sortable: true},
		    {field: 'deptName',title: '部门名称'},
		    {field: 'ipAddr',title: '登录地址'},
		    {field: 'loginLocation',title: '登录地点'},
		    {field: 'browser',title: '浏览器'},
		    {field: 'os',title: '操作系统'},
		    {field: 'status',title: '会话状态',align: 'center',templet:'#userStatus'},
		    {field: 'startTimestamp',title: '登录时间',sortable: true},
		    {field: 'lastAccessTime',title: '最后访问时间',sortable: true},
		    {title: '操作',align: 'center',templet:'#barDh'}
	    ]
    	]
        ,toolbar: '#toolbar1'
        ,height:'full-90'
    });
  	//监听表格工具条
    table.on('tool(ftable)', function (obj) {
        var data = obj.data;
        if(obj.event === 'forceLogout'){ //单条强退
            $.modal.confirmCom('确定要强制选中用户下线吗？',function(){
                $.operate.post('/system/online/forceLogout',{'sessionId':data.sessionId});
                active['reload'].call(this);
        	});
        };
    });
  //监听头部工具条
    table.on('toolbar(ftable)', function(obj){
    	if(obj.event === 'batchForceLogout'){//批量强退
        	var rows = $.tablelist.getCheckData("dhtable");
    		if (rows.length == 0 || rows == "[]") {
    			$.modal.alertWarning("请选择要强退的用户");
    			return;
    		}
    		$.modal.confirmCom("确认要强退选中的" + rows.length + "条数据吗?", function() {
    			var url = "/system/online/batchForceLogout";
    			var ids=[];
    			for (var i = 0; i < rows.length; i++) {
    			    ids[i] = rows[i]['sessionId'];
    			};
    			var data = { "ids": ids};
    			$.operate.post(url, data);
                active['reload'].call(this);
    		});
        };
    });
	//表单重载方法
	var active = {
        reload: function (formData) {
        	$.each(wherestr,function(i,v){$("#"+i).val()?wherestr[i]=$("#"+i).val():wherestr[i]='';});//动态获取条件的值
            table.reload('dhtable', {page: {curr: 1},where:wherestr});
        },
    };
	//搜索按钮
 	$('#btn-search').on('click', function () {
 		$.each(wherestr,function(i,v){$("#"+i).val()?wherestr[i]=$("#"+i).val():wherestr[i]='';});//动态获取条件的值
        table.reload('dhtable', {page: {curr: 1},where:wherestr});
     });
 	//监听下拉框——添加条件
 	form.on('select(fft)', function(obj){
 		addMore(this);
 	});
});
</script>
</body>
</html>